<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 01_元素内容操作：操作元素和元素内容的方式 
		.html()     1.无参形式---功能：获取匹配元素集合中第一个元素
		            2.有参形式---功能：【设置】获取匹配元素集合中所有元素并替换
		特点：添加元素+内容
		.val()      1.无参形式---功能：针对表单元素：input、select、...
		                              获取第一个表单元素的值【value】
		            2.有参形式---功能：针对表单元素：input、select、...
					                  设置表单元素的值，input直接设置
		特点：设置表单元素+内容、下拉列表只能添加存在value值        select不能直接设置，只能设置原有value值
		.text()     1.无参形式---获取匹配元素集合中所有元素的文本内容
		            2.有参形式---【设置】获取匹配元素集合中所有元素的文本内容做替换
		特点：添加内容
		-->
	</head>
	<body>
		<h1>html()函数的使用</h1>
		<button>html()函数 有参</button>
		<span>lorem1</span>
		<span>lorem2</span>
		<h1>val()函数的使用</h1>
		<button class="btn1">val()函数【input】 无参</button>
		<input type="text"  value="文本框真实数据1"/>
		<input type="text"  value="文本框真实数据2" placeholder="文本框提示"/>
		<!-- html  按钮 .btn2  select>option*3 
		     jq：  点击按钮，显示第一个表单元素的值
		-->
		<br />
		<button class="btn2">val()函数【select】 无参</button>
		<button class="btn3">val()函数【select】 有参</button>
		<select>
			<option value="rem1">lorem1</option>
			<option value="rem2">lorem2</option>
			<option value="rem3">lorem3</option>
		</select>
		<h1>text()函数的使用：包裹内容</h1>
		<button class="btn4">text()函数 无参</button>
		<button class="btn5">text()函数 有参</button>
		<p>lorem5</p>
		<p>lorem6</p>
		<p>lorem7</p>
		
		<script>
			// 按钮，点击按钮，实现span内容 改成lorem lorem
			/*变量    js变量--jq变量
			int i=1;  Java写法--强类型语言
			var i=数值、元素; JavaScript--弱类型语言
			*/
		   // var html=$("span").html();
		   // alert("html()函数的无参值："+html)
		  // $("button").click(function(){
			 // $("span").html("<span>lorem</span>");
		  // });
		   // $(".btn1").click(function(){
			  //  /*变量名不允许使用关键字  js中关键字 for in 遍历数组的*/
			  //  var ins=$("input").val();
			  //  alert("val()针对input元素 无参"+ins);
		   // });
		 //  $(".btn2").click(function(){
			// var ins=$("select").val();
			// alert("val()针对select元素 无参"+ins)
		 //  });
		 //  $(".btn3").click(function(){
		 //  	//var ins=$("select").val("");
			// //抓取打印select的JS对象。默认字符串形式表示[object Object]
			// //抓取select的JS对象，调用对象toString()方法，如果没有重写[object Object]
		 //  	//设置  第一个option的value值
			// $("select").val("rem1");
			// var ins=$("select").val();
			// alert("val()针对select元素 有参"+ins);
		 //  });
		  
		//抓到无参按钮，点击，打印p的text值
		//抓到有参按钮，点击，改变p中文本的内容，改变效果
		// $(".btn4").click(function(){
		// var texts=$("p").text();
		// alert(""+texts)
		// });
		$(".btn5").click(function(){
			$("p").text("jjhhhh");
		});
		</script>
	</body>
</html>